<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { insertChapterApi, publishChapterApi } from '@/api/chapter.js'
import { getChapterDetailApi } from '@/api/chapter.js'
const route = useRoute()

const getChapterDetail = async () => {
  const res = await getChapterDetailApi(
    route.query.novelId,
    route.query.chapterId
  )
  console.log(res.data.data)
  chapterForm.value.chapterName = res.data.data.chapterName
  chapterForm.value.chapterText = res.data.data.chapterText
  chaptertextarea.value = res.data.data.chapterText
}

getChapterDetail()

const chapterForm = ref({
  novelId: route.query.novelId,
  chapterName: '',
  chapterText: ''
})
// 保存按钮
const chaptertextarea = ref('')
const getchaptertextarea = async () => {
  await insertChapterApi(chapterForm.value)
  chaptertextarea.value = chapterForm.value.chapterText
}
// 发布按钮
const publishtextarea = async () => {
  await publishChapterApi(chapterForm.value)
}
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item>
          <p class="btn-group">
            <a class="btn-group-a" :href="`/novel/${novelId}`"> 返回我的作品</a>
          </p>
          <el-button>字数统计</el-button>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="chapterForm.chapterName"
            style="width: 100%"
            maxlength="10"
            placeholder="请输入章节名"
            show-word-limit
            type="text"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="chaptertextarea"
            style="width: 100%"
            disabled
            :autosize="{ minRows: 2, maxRows: 2 }"
          />
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getchaptertextarea"
              >保存</el-button
            >
            <el-button @click="publishtextarea">发布</el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="chapterForm.chapterText"
            maxlength="5000"
            style="width: 100%"
            :autosize="{ minRows: 10, maxRows: 10 }"
            placeholder="请输入章节内容"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<style>
.el-form-item__content {
  justify-content: space-between;
  .btn-group {
    display: inline-block;
    border: 1px #ccc solid;
    border-radius: 5%;
    padding: 1px 13px;
    .btn-group-a {
      text-decoration: none;
      color: #606266;
      font-size: 14px;
      font-family: Arial;
    }
  }
}
</style>
